<template>
  <div>举报查询</div>
  <!-- {{ list }} -->
  <div>
    <NDataTable :loading="loading" :data="list" :columns="columns"></NDataTable>
  </div>

  <!-- 分页信息 -->
  <div>
    <NFlex justify="center">
      <NPagination v-model:page="page.pageNumber" :page-size="page.pageSize"></NPagination>
    </NFlex>
  </div>

  <!-- 删除的对话框 -->
  <NModal @after-leave="requery" preset="dialog" v-model:show="delvisible" title="删除">
    <div>
      {{ delid }}
      <NInput v-model:value="yuanyin" placeholder=""></NInput>
    </div>

    <template #action>
      <NButton type="primary" @click="del"></NButton>
    </template>
  </NModal>

  <!-- 查看举报原因的对话框 -->
  <NModal @after-leave="requery" preset="dialog" v-model:show="visible" title="">
    <div>
      <!-- {{ list2 }} -->
      <div>
        <NDataTable :loading="loading" :data="list2" :columns="columns2"></NDataTable>
      </div>
    </div>
  </NModal>
</template>

<script setup lang="ts">
import type {} from '@/types/admin/Sytem'
import { Api } from '@/types/Api'
import type { BaseDataResult, BaseResult, PageBean, PageVO } from '@/types/BaseResult'
import { onMounted, ref } from 'vue'
import {
  NButton,
  NDataTable,
  NFlex,
  NInput,
  NModal,
  NPagination,
  NSpace,
  useMessage,
  type DataTableColumn,
} from 'naive-ui'
import type { TbMessage, TbMessageReport } from '@/types/message'
import { h } from 'vue'
import router from '@/router'

const message = useMessage()

const requery = () => {
  page.value.pageNumber = 1
  query()
}

const page = ref({ pageNumber: 1, pageSize: 13 } as PageBean)
const list = ref([] as Array<TbMessage>)

const loading = ref(false)

//#region 详情
const toDetail = (mid: number) => {
  router.push(`/message/${mid}`)
}

//#endregion

//#region 查看原因
const visible = ref(false)
const list2 = ref([] as Array<TbMessageReport>)
const page2 = ref({ pageNumber: 1, pageSize: 13 } as PageBean)

const chakan = (mid: number) => {
  Api.get(
    `/admin/message/${mid}/${page2.value.pageSize}/${page2.value.pageNumber}`,
    {},
    (data: BaseDataResult<PageVO<TbMessageReport>>) => {
      if (data.success) {
        list2.value = data.data.list
        page2.value = data.data.pageBean
        visible.value = true
        return
      }
      message.error(data.message)
    },
  )
}

const columns2 = ref([
  {
    title: '举报原因',
    key: 'info',
  },
  {
    title: '举报时间',
    key: 'created',
  },
])
//#endregion

//#region 删除的部分
const delvisible = ref(false)
const yuanyin = ref('')
const delid = ref(0)
const shanchu = (mid: number) => {
  delid.value = mid
  delvisible.value = true
  yuanyin.value = ''
}

const del = () => {
  loading.value = true
  Api.delete(`/admin/message`, { mid: delid.value, reason: yuanyin.value }, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      message.success('删除成功')
      requery()
      return
    }
  })
}

//#endregion

const query = () => {
  loading.value = true
  Api.get(
    `/admin/message/${page.value.pageSize}/${page.value.pageNumber}`,
    {},
    (data: BaseDataResult<PageVO<TbMessage>>) => {
      loading.value = false
      if (data.success) {
        list.value = data.data.list
        page.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

const columns = ref([
  {
    title: '标题',
    key: 'title',
  },

  {
    title: '管理员删帖原因',
    key: 'reason',
  },
  {
    title: '删除标记',
    key: 'deleted',
    render(row) {
      return row.deleted == 'y' ? '已经删除' : '等待处理'
    },
  },
  {
    title: '信息发布时间',
    key: 'lastupdate',
    render(row) {
      return h(NSpace, {}, [
        h(
          NButton,
          {
            size: 'small',
            type: 'info',
            onClick: () => {
              toDetail(row.mid)
            },
          },
          '查看帖子',
        ),

        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            onClick: () => {
              chakan(row.mid)
            },
          },
          '查看举报原因',
        ),

        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            onClick: () => {
              shanchu(row.mid)
            },
          },
          '删除',
        ),
      ])
    },
  },
] as DataTableColumn<TbMessage>[])

onMounted(() => {
  query()
})
</script>

<style scoped lang="scss"></style>
